<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>SimpleMall login</title>
	<link type="text/css" rel="stylesheet" href="css/base.css" />
	<link type="text/css" rel="stylesheet" href="css/destine.css" />
	<link type="text/css" rel="stylesheet" href="css/alicdn.css" />
	<script src="js/vue.min.js" type="text/javascript"></script>
	<script src="js/vue-resource.min.js" type="text/javascript"></script>
	<script src="js/api.js" type="text/javascript"></script>
	<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
	<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
</head>
<body>

<div id="app">
	<header>
		<div class="login-head"><i></i></div>
	</header>

	<div class="form-page">
		<form>
			<ul class="form-list">
				<li>
					<input type="tel" class="form-inp" placeholder="请输入手机号" ref="phone" />
				</li>
				<li>
					<div id="your-dom-id" class="nc-container"></div>
					<!--No-Captcha渲染的位置，其中 class 中必须包含 nc-container-->
				</li>
				<li>
					<input type="password" class="form-inp" placeholder="请输入短信验证码" ref="password" />
					<i class="form-dao" @click="verificaty">发送验证码</i>
				</li>
				<li>
					<input type="button" class="form-btn" value="登录" @click="invokeLogin" />
				</li>
			</ul>
			<p class="form-sup fd-tc fs24">假如您还没有账号！请<a href="sex.html">快速注册</a></p>
		</form>
	</div>

	<!--		<div class="form-group">
                <label for="exampleInputEmail1">Phone</label> <input type="email"
                    class="form-control" id="exampleInputEmail1" ref="phone"
                    placeholder="CellPhone">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label> <input
                    type="password" class="form-control" id="exampleInputPassword1"
                    ref="password" placeholder="Password">
            </div>
            <div class="alert alert-warning" role="alert">{{ message }}</div>
            <button type="submit" class="btn btn-default" v-on:click="invokeLogin">Login</button>
            <button type="button" class="btn btn-default"
                v-on:click="invokeSignup">Free Signup!</button>-->
</div>
<script type="text/javascript">
    var app = new Vue({
        el : '#app',
        data : {
            message : 'Hello Vue!',
            sig: '',
            csessionid: '',
            token: ''
        },
        mounted:function(){
            this.getCaptche()
        },
        methods : {
            invokeLogin : function() {
				if(this.$refs.phone.value == '' || this.$refs.password.value == ''){
					return;
				}
                // 等同于jquery的$.ajax
                this.$http.post(api.ip + '/acc/login', {
                    phone : this.$refs.phone.value,
                    password : this.$refs.password.value
                }, {
                    emulateJSON : true
                }).then(function(res) {

                    this.message = res.body.respMsg

                    if(res.body.respCode == 1){
                    	console.log(res.body);
                        localStorage.setItem('token', res.body.respData);
                        localStorage.setItem('userId', res.body.respMap.account.tid);
                    	if(res.body.respMap.message.sex){
							window.location.href = 'index.html';
						}else {
                            window.location.href = 'sex.html';
                        }
                    }
                }, function(res) {
                    console.log(res.body.respData);
                })
            },
            verificaty: function() {
                if(this.sig == '' || this.csessionid == '' || this.token == ''){
                    return false;
                }
                // 等同于jquery的$.ajax
                this.$http.post(api.ip + '/acc/getPhoneCode', {
                    phoneNum : this.$refs.phone.value,
                    sig: this.sig,
                    csessionid: this.csessionid,
                    token: this.token
                }, {
                    emulateJSON : true
                }).then(function(res) {

                    this.message = res.body.respMsg
                    console.log(res)

                }, function(res) {
                    console.log(res.body.respData);
                })
            },
            getCaptche: function () {
                var that = this;
                var sig = ''
                var csessionid = ''
                var token = ''
                var appkey = 'FFFF00000000017C3871'
                var scene = 'nc_login_h5'
                var nc_token = [appkey, (new Date()).getTime(), Math.random()].join(':')
                console.log()
                nc = NoCaptcha.init({
                    renderTo: '#your-dom-id',
                    appkey: appkey,
                    scene: scene,
                    token: nc_token,
                    customWidth: 386,
                    trans: {
                        "key1": "code200"
                    },
                    elementID: ["usernameID"],
                    is_Opt: 0,
                    language: "cn",
                    timeout: 10000,
                    retryTimes: 5,
                    errorTimes: 5,
                    inline: false,
                    apimap: {
                        // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
                        // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
                    },
                    bannerHidden: false,
                    initHidden: false,
                    callback: function(data) {
                        csessionid = data.csessionid
                        sig = data.sig
                        token = nc_token
                        that.sig = sig
                        that.token = token
                        that.csessionid = csessionid
                    },
                    error: function(s) {}
                })
                NoCaptcha.setEnabled(true)
                nc.reset() //请务必确保这里调用一次reset()方法

                NoCaptcha.upLang('cn', {
                    'LOADING': "加载中...", //加载
                    'SLIDER_LABEL': "请向右滑动验证", //等待滑动
                    'CHECK_Y': "验证通过", //通过
                    'ERROR_TITLE': "非常抱歉，这出错了...", //拦截
                    'CHECK_N': "验证未通过", //准备唤醒二次验证
                    'OVERLAY_INFORM': "经检测你当前操作环境存在风险，请输入验证码", //二次验证
                    'TIPS_TITLE': "验证码错误，请重新输入" //验证码输错时的提示
                })

            }

        }
    })
</script>
</body>
</html>